<template>
  <view class="page">
    <view class="content scroll-view" scroll-y="true" @scroll="onScroll">
      <navbar bgColor="transparent" type="pill"></navbar>
      <view class="item-box">
        <u-swiper :list="houseInfo.apartmentPictureList" @change="change" :indicator="true"
                  indicatorMode="dot" height="1000rpx" border-radius="0"></u-swiper>
        <view class="house-content">
          <view class="flex justify-between">
            <view class="price-night flex align-end" v-if="houseInfo.leaseIntervalType === '1'">￥
              <text class="number">{{ estimatePrice.averagePrice }}</text>
              /晚
            </view>
            <view class="price-night flex align-end" v-if="houseInfo.leaseIntervalType !== '1'&&houseInfo.monthRent">￥
              <text class="number">{{ houseInfo.monthRent }}</text>
              /月
            </view>
          </view>
          <view class="coupon">
            <view class="coupon-label" @click.stop="handleShowCoupon">
              <view class="coupon-label-item" v-for="(item,index) in couponList.slice(0,3)">
                <text class="label-text">{{ item.couponLabel }}</text>
              </view>
            </view>
            <view class="coupon-more" @click.stop="handleShowCoupon">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="house-info-box">
            <view class="house-info">
              <view class="tip-title">{{ houseInfo.title }}</view>
              <view class="describe">{{ houseInfo.apartmentDescription }}</view>
            </view>
            <view class="handle-box">
              <view class="house-collection" @click.stop="handleCollect(houseInfo.collectState)">
                <u-icon :name="houseInfo.collectState==='0'? 'star-fill' : 'star'" size="50rpx"
                        :color="houseInfo.collectState==='0'? '#D9001B' : ''"></u-icon>
              </view>
              <view class="house-share" @click.stop="handleShowShare">
                <u-icon name="share-square" size="50rpx"></u-icon>
              </view>
            </view>

          </view>

          <!-- <view class="tip-title">{{houseInfo.title}}</view> -->
          <view class="tag-box" style="margin-top: 8rpx;">
            <view class="h-tag" :class="{'h-tag-active':index==0}" v-for="(item,index) in houseInfo.labelNames"
                  :key="index">{{ item }}
            </view>
          </view>
          <view class="flex justify-between map-box" @click="toMap">
            <view class="flex flex-column justify-center" style="width: 490rpx;">
              <view class="businessCircle">
                {{ houseInfo.businessCircleName ? houseInfo.businessCircleName : houseInfo.apartmentDescription }}
              </view>
              <view class="description">{{ houseInfo.locationDescription ? houseInfo.locationDescription : '' }}
              </view>
            </view>
            <view class="flex align-center" style="width: 120rpx;">
              <view class="flex flex-column justify-center align-center">
                <image class="location-icon"
                       src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/map-location.png"
                       mode="widthFix"></image>
                <text class="map-tip">地图/导航</text>
              </view>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="house-overview main-box">
            <view class="main-title" style="margin-bottom: 28rpx;">房屋概览</view>
            <view class="house-item">
              <view class="flex align-center">
                <image class="item-icon"
                       src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/window.png"
                       mode=""></image>
                <view class="flex align-center">
                  <dict-tag :options="dict.type.allocation_type" :value="houseInfo.allocationType"/>
                  <text>{{ houseInfo.house.houseArea }}㎡</text>
                </view>
              </view>
              <view class="flex align-center">
                <image class="item-icon"
                       src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/room.png"
                       mode=""></image>
                <text>{{ houseInfo.house.roomType || 0 }}室{{
                    houseInfo.house.hall || 0
                  }}厅{{ houseInfo.house.toilet || 0 }}卫
                </text>
              </view>
            </view>
            <view class="house-item">
              <view class="flex align-center">
                <image class="item-icon"
                       src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/person.png"
                       mode=""></image>
                <view class="flex align-center">
                  <text>可住{{ houseInfo.checkInNumber }}人</text>
                </view>
              </view>
              <view class="flex align-center">
                <image class="item-icon"
                       src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/window.png"
                       mode=""></image>
                <text>{{ houseInfo.windowState == 0 ? '有窗户' : '没窗户' }}</text>
              </view>
            </view>
            <view class="house-item">
              <view class="flex align-center">
                <image class="item-icon"
                       src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/bed.png"
                       mode=""></image>
                <view class="flex align-center">
                  <text>{{ houseInfo.bedNumber }}床</text>
                </view>
              </view>
              <view class="flex align-center">
                <image class="item-icon"
                       src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/elevator.png"
                       mode=""></image>
                <text>{{ houseInfo.elevatorState == 0 ? '有电梯' : '没电梯' }}</text>
              </view>
            </view>
          </view>
          <view class="main-box">
            <view class="main-title flex justify-between">
              <text>服务设施</text>
              <view class="flex align-center all-facility" @click="handleShowFacility">
                <text style="margin-right: 12rpx;">全部服务设施</text>
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
            <view class="flex justify-between" style="margin-top: 44rpx;"
                  v-for="(Facilities,key,i) in houseInfo.serviceFacilitiesMap" :key="key">
              <view class="facility-title" v-if="i<4">
                {{ key }}
              </view>
              <view class="facility-box" v-if="i<4">
                <view v-for="(item,index) in Facilities" :key="index" class="facility flex align-center">
                  <image class="f-icon"
                         src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/facilitie-icon.png"
                         mode=""></image>
                  {{ item.facilitiesName }}
                </view>
              </view>
            </view>
          </view>
<!--          <view class="main-box">-->
<!--            <view class="main-title">预定须知</view>-->
<!--            <view class="gray-title">以下规则由房东制定，请知悉阅读并遵守</view>-->
<!--            <view class="flex align-center mini-title">-->
<!--              <image class="icon-img"-->
<!--                     src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/detail/25733%402x.png"-->
<!--                     mode=""></image>-->
<!--              下单即有房，无需等待确认-->
<!--            </view>-->
<!--            <view class="flex align-center free-title">-->
<!--              <image class="icon-img"-->
<!--                     src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/detail/25734%402x.png"-->
<!--                     mode=""></image>-->
<!--              30分钟内免费取消-->
<!--            </view>-->
<!--            <view class="rule-box">-->
<!--              <view class="flex justify-between rule-header">-->
<!--                <view>退订时间</view>-->
<!--                <view>退订费</view>-->
<!--              </view>-->
<!--              <view class="flex justify-between rule-item" v-for="(item,index) in ruleList" :key="index">-->
<!--                <view>{{ item.title }}</view>-->
<!--                <view>{{ item.value }}</view>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
          <view class="main-box">
            <view class="main-title">费用须知</view>
            <view class="gray-title">以下规则由房东制定，请知悉阅读并遵守</view>
            <view class="flex align-center mini-title">
              <image class="icon-img"
                     src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/detail/25733%402x%20(1).png"
                     mode=""></image>
              ￥{{ houseInfo.cashPledge }}
            </view>
            <view class="gray-title" style="margin-left: 40rpx;">由房东收取押金，具体押金收取和退还流程可咨询房东</view>
          </view>
          <view class="main-box">
            <view class="main-title">入住须知</view>
            <view class="gray-title">以下规则由房东制定，请知悉阅读并遵守</view>
            <view class="flex align-center mini-title">
              <image class="icon-img"
                     src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/detail/25733%402x%20(1).png"
                     mode=""></image>
              {{ houseInfo.checkInTime }}-次日{{ houseInfo.checkOutTime }}间可入住，{{
                houseInfo.suggestCheckOutTime
              }}前需退房
            </view>
            <view class="flex align-center mini-title" v-if="houseInfo.checkInTypeList.includes('1')">
              <image class="icon-img"
                     src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/detail/25734%402x%20(1).png"
                     mode=""></image>
              实名登记
            </view>
            <view class="gray-title" style="margin-left: 40rpx;" v-if="houseInfo.checkInTypeList.includes('1')">
              携带身份证，方便配合房东办理入住登记，避免因为未带身份证被拒绝入住
            </view>
            <view class="flex align-center mini-title" v-if="houseInfo.checkInTypeList.includes('2')">自助入住
            </view>
            <view class="gray-title" style="margin-left: 40rpx;" v-if="houseInfo.checkInTypeList.includes('2')">
              全程自助办理入住，无需与房东接触，密码钥匙将在入住当天由房东提供
            </view>
            <view class="flex align-center mini-title" style="margin-bottom: 16rpx;">
              <image class="icon-img"
                     src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/detail/25733%402x%20(2).png"
                     mode=""></image>
              要求
            </view>
            <view class="require-box">
              <view class="flex align-center require-item" v-for="(item,index) in houseInfo.houseRequireList"
                    :key="index">
                <image v-if="item.requireType==0" class="require-img"
                       src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/require_.png"
                       mode=""></image>
                <image v-else class="require-img"
                       src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/require.png"
                       mode=""></image>
                <text>{{ item.requireType == 0 ? '允许' : '不允许' }}{{ item.requireName }}</text>
              </view>
            </view>
            <view class="flex align-center mini-title gray-text">
              房屋编号 {{ houseInfo.houseId }}<span class="iconfont icon-copy"
                                                    @click="copyText(houseInfo.houseId)"></span>
            </view>
          </view>
        </view>
      </view>
      <view class="flex justify-between align-center bottom-box safe-area-inset-bottom fade-in-out" v-if="showBottom">
        <view style="padding-left: 30rpx;" class="flex flex-column align-center justify-center" @click="callPhone">
          <image
              src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-front/druid/saas-v5/%E6%88%BF%E4%B8%9C%402x.jpg"
              class="landlord-img" mode=""></image>
          <text class="landlord-text">联系房东</text>
        </view>
        <view class="vertical"></view>
        <view class="flex flex-column time-box" @click="selectDate">
          <view>入
            <text class="time-text">{{ form.startTime|formatDate('MM-dd') }}</text>
          </view>
          <view>离
            <text class="time-text">{{ form.endTime|formatDate('MM-dd') }}</text>
          </view>
        </view>
        <view class="flex align-center justify-center">
          <view class="flex flex-column align-center justify-center reserve" @click="toAddOrder" v-if="houseInfo.leaseIntervalType === '1'">
            <view>立即预定</view>
            <view class="subday">{{ subDay }}晚预估￥{{ estimatePrice.totalPrice }}</view>
          </view>
          <view class="flex flex-column align-center justify-center appointment" @click="toAppointment">
            <view>预约看房</view>
          </view>
        </view>

      </view>
      <!-- 日历组件 -->
      <uvCalendar :priceList="priceList" :show="showCalendar" :formatter="formatter" mode="range"
                  @close="closeCalendar" @confirm="confirmCalendar" color="#FF7947" startText="入住时间"
                  endText="离开时间"
                  monthNum="12" :default-date="defaultDate" ref="calendar" @monthChange="monthChange">
      </uvCalendar>
      <u-popup :show="showFacility" @close="close" :closeable="true" @touchmove.prevent>
        <view class="pop-box">
          <view class="pop-title">服务设施</view>
          <view class="pop-content">
            <view class="flex justify-between" style="margin: 20rpx 0;"
                  v-for="(Facilities,key) in houseInfo.serviceFacilitiesMap" :key="key">
              <view class="facility-title" style="margin-left: 44rpx;">
                {{ key }}
              </view>
              <view class="facility-box">
                <view v-for="(item,index) in Facilities" :key="index"
                      class="facility flex align-center">
                  <image class="f-icon"
                         src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/facilitie-icon.png"
                         mode=""></image>
                  {{ item.facilitiesName }}
                </view>
              </view>
            </view>
          </view>

        </view>
      </u-popup>
      <u-popup :show="showCoupon" @close="showCoupon = false" :closeable="true" @touchmove.prevent>
        <view class="pop-box">
          <view class="pop-title">优惠券</view>
          <view class="pop-content">
            <view class="coupon__list">
              <view class="coupon__list__item" v-for="(item, index) in couponList" :key="index">
                <view class="coupon__list__item__content">
                  <view class="coupon__list__item__content__left active">
                    <view class="coupon__list__item__content__left__price" v-if="item.couponType === '3'">
                      <text>{{ item.couponDenomination }}</text>
                      折
                    </view>
                    <view class="coupon__list__item__content__left__price" v-else>
                      ¥
                      <text>{{ item.couponDenomination }}</text>
                    </view>
                    <view class="coupon__list__item__content__left__condition">
                      <text v-if="item.couponType === '1'||item.couponType === '3'">满{{
                          item.couponThreshold
                        }}可用
                      </text>
                      <text v-else-if="item.couponType === '2'">无门槛</text>
                    </view>
                  </view>
                  <view class="coupon__list__item__content__center">
                    <view class="coupon__list__item__content__center__name">
                      <text>{{ item.couponName }}</text>
                    </view>
                    <view class="coupon__list__item__content__center__validTime">
                      有效期：
                      <text v-if="item.validityPeriodType === '1'">{{ item.activityStartTime }}至{{
                          item.activityEndTime
                        }}
                      </text>
                      <text v-if="item.validityPeriodType === '2'">{{ item.activityEndTime }}前有效</text>
                    </view>
                    <view class="coupon__list__item__content__center__desc">
                      <view class="coupon__list__item__content__center__desc__label">使用说明：</view>
                      <view class="coupon__list__item__content__center__desc__text"
                            v-html="item.couponInstruction"></view>
                      <view class="coupon__list__item__content__center__desc__detail"
                            @click="handleShowCouponInstruction(item)">详情
                      </view>
                    </view>
                  </view>
                  <view class="coupon__list__item__content__right">
                    <view class="coupon__list__item__content__right__button"
                          :class="{'active': item.receiveState === '0'}" v-if="item.receiveState === '0'">
                      已领取
                    </view>
                    <view class="coupon__list__item__content__right__button" @click.stop="handleReceiveCoupon(item)"
                          v-else>
                      立即领取
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="pop-footer">
          <button class="pop-footer__button" @click.stop="showCoupon = false">关闭</button>
        </view>
      </u-popup>
      <!--   使用说明弹窗   -->
      <hxk-dialog ref="couponInstructionDialog">
        <view class="dialog__content" slot="content">
          <view class="dialog__content__desc" v-html="couponInstructionDialogData.couponInstruction"></view>
        </view>
      </hxk-dialog>
      <!--   分享弹窗   -->
      <u-popup :show="showShare" :round="10" mode="bottom" @close="showShare = false">
        <view class="share-box">
          <view class="share-item-box">
            <button open-type="share">
              <view class="item-icon">
                <image class="share-icon" src="@/static/shareIcon/weixin.png" mode="aspectFill"
                       style="width: 100%;height: 100%;"></image>
              </view>
              <view>分享好友</view>
            </button>
          </view>
          <view class="share-item-box" @click="handleGeneratePoster">
            <view class="item-icon">
              <image class="share-icon" src="@/static/shareIcon/poster.png" mode="aspectFill"
                     style="width: 100%;height: 100%;"></image>
            </view>
            <view>生成海报</view>
          </view>
        </view>
      </u-popup>
      <hxk-house-poster ref="housePoster" :share-options="shareOption"></hxk-house-poster>
    </view>
  </view>

</template>

<script>
import {
  getInfo,
  estimatedAmount,
  getPriceList,
  unsubscribeAmount, getWxaCode
} from '@/api/home';
import uvCalendar from '@/components/uv-calendar/uv-calendar.vue';
import navbar from '@/components/custom-navbar/navbar.vue';
import {
  DateDiff,
  dateToFormat,
  DateAdd,
  formatCnDate
} from '@/utils/time.js'
import {addCollection, deleteCollection} from "@/api/mine/history";
import {debounce} from "@/utils/common";
import {addCouponRecord, getCouponByHouseId} from "@/api/mine/coupon";

export default {
  dicts: ['allocation_type'],
  components: {
    uvCalendar,
    navbar
  },
  data() {
    return {
      showBottom: false,
      priceList: [],
      houseInfo: {
        checkInTypeList: []
      },
      houseId: '',
      showCalendar: false,
      defaultDate: [],
      form: {
        "startTime": "", //开始时间
        "endTime": "", //结束时间
      },
      estimatePrice: {},
      ruleList: [],
      showFacility: false,
      // 是否收藏房源
      isCollect: false,
      // 是否显示优惠券
      showCoupon: false,
      // 优惠券列表
      couponList: [],
      // 优惠券使用说明弹窗数据
      couponInstructionDialogData: {},
      // 分享弹窗
      showShare: false,
      shareOption: {},
      shareList: [
        {
          icon: '/static/shareIcon/weixin.png',
          title: '分享好友',
        },
        //生成海报分享
        {
          icon: '/static/shareIcon/share.png',
          title: '生成海报',
        }
      ]
    }
  },
  onPageScroll(e) {
    if (e.scrollTop > 100) {
      this.showBottom = true;
    } else {
      this.showBottom = false;
    }
  },
  computed: {
    subDay: {
      get() {
        return DateDiff(this.form.startTime, this.form.endTime)
      },
      set() {

      }

    },
    userInfo: {
      get() {
        return this.$store.state.user.userInfo
      },
      set() {
      }
    },
  },
  onLoad: function (option) {
    console.log('onLoad', option)
    let e = {}
    if (option.data || option.houseId || option.scene) {
      if (option.data) {
        e = JSON.parse(decodeURIComponent(option.data));
        this.houseId = e.houseId;
      }
      if (option.houseId) {
        this.houseId = option.houseId;
      }
      if (option.scene) {
        console.log('option.scene', option.scene)
        const scene = decodeURIComponent(option.scene);
        this.houseId = scene.split('=')[1];
      }
      this.form.startTime = e.startTime ? e.startTime + ' 00:00:00' : dateToFormat() + ' 00:00:00';
      this.form.endTime = e.endTime ? e.endTime + ' 00:00:00' : DateAdd('day', this.form.startTime, 1) + ' 00:00:00';
      this.getHouse();
      this.getEstimatedAmount();
      this.getRule();
    }
  },
  onReady() {
    // 如果需要兼容微信小程序的话，需要用此写法
    this.$refs.calendar.setFormatter(this.formatter)
  },
  //1.配置发送给朋友
  onShareAppMessage(e) {
    console.log('onShareAppMessage', e)
    let pages = getCurrentPages()
    let currentPage = pages[pages.length - 1]
    console.log('currentPage', currentPage)
    return {
      title: this.houseInfo.title, //分享的标题
      path: `/${currentPage.route}?data=${encodeURIComponent(JSON.stringify(this.houseInfo))}`, //点击分享链接之后进入的页面路径
      imageUrl: this.houseInfo.apartmentPictureList[0] ? this.houseInfo.apartmentPictureList[0] : '/static/logo.png', //分享发送的链接图片地址
    };
  },
  methods: {
    onScroll(event) {
      const scrollTop = event.detail.scrollTop;
      if (scrollTop >= 100) {
        this.showBottom = true;
      } else {
        this.showBottom = false;
      }
    },
    formatter(day, priceList) {
      const d = new Date()
      let month = d.getMonth() + 1
      const date = d.getDate()
      let time = priceList.find(item => {
        return item.calendarTime == formatCnDate(day.date)
      })
      if (time && time.reserveState == 0) {
        day.bottomInfo = '￥' + time.calendarPrice
      } else if (time && time.reserveState == 1) {
        day.bottomInfo = '无房'
      }
      return day
    },
    closeCalendar() {
      this.showCalendar = false
    },
    close() {
      this.showFacility = false;
    },
    confirmCalendar(e) {
      this.form.startTime = e[0] + ' 00:00:00';
      this.form.endTime = e[e.length - 1] + ' 00:00:00';
      this.showCalendar = false
      this.getEstimatedAmount();
      this.getRule();
    },
    getHouse() {
      console.log('getHouse', this.userInfo)
      getInfo({
        houseId: this.houseId,
        operatorId: this.userInfo.userId
      }).then(res => {
        let data = res.data
        data.labelNames = data.labelNames.split(',')
        this.houseInfo = data

        let wxCodeParams = {
          page: `${getCurrentPages()[getCurrentPages().length - 1].route}`,
          scene: `houseId=${this.houseId}`,
          //envVersion: 'trial'//要打开的小程序版本。正式版为 "release"，体验版为 "trial"，开发版为 "develop"。默认是正式版。
          envVersion: uni.getAccountInfoSync().miniProgram.envVersion === 'release' ? 'release' : 'trial'
        }
        getWxaCode(wxCodeParams).then(res => {
          console.log('getWxaCode', res)
          let codeUrl = res.msg
          this.shareOption = {
            mainImg: this.houseInfo.apartmentPictureList[0],
            title: this.houseInfo.title,
            subTitle: this.houseInfo.apartmentDescription,
            price: this.estimatePrice.averagePrice,
            codeUrl: codeUrl,
          }
        })

      })
      // 获取优惠券
      getCouponByHouseId({houseId: this.houseId}).then(res => {
        this.couponList = res.data;
      })
    },
    getRule() {
      let data = {
        houseId: this.houseId,
        "startTime": this.form.startTime,
        "endTime": this.form.endTime

      }
      unsubscribeAmount(data).then(res => {
        this.ruleList = res.data;
      })
    },
    getEstimatedAmount() {
      let data = this.form
      data.houseId = this.houseId;
      estimatedAmount(data).then(res => {
        this.estimatePrice = res.data
      })
    },
    callPhone() {
      uni.showActionSheet({
        itemList: [this.houseInfo.contactPhone],
        success: res => {
          uni.makePhoneCall({
            phoneNumber: this.houseInfo.contactPhone
          })
        },
        fail: function (res) {
          console.log(res.errMsg);
        }
      });
    },
    toMap() {
      uni.openLocation({
        latitude: this.houseInfo.latitude,
        //latitude:23.157159,
        longitude: this.houseInfo.longitude,
        // longitude:113.2732,
        name: '房源位置',
        address: this.houseInfo.house.fullAddress,
      })
    },
    selectDate() {
      let longtime;
      switch (this.houseInfo.leaseScope) {
        case '1':
          longtime = 3
          break;
        case '2':
          longtime = 6
          break;
        case '3':
          longtime = 12
          break;
        case '4':
          longtime = 24
          break;
        default:
          break;
      }
      let date = new Date();
      let startTime = formatCnDate(date, 'yyyy-MM-dd hh:mm:ss')
      // let endTime = date.setMonth(date.getMonth() + longtime) - (60 * 60 * 24 * 1000);
      let endTime = DateAdd('month', startTime, 2)
      let data = {
        "startTime": startTime, //开始时间
        "endTime": formatCnDate(endTime, 'yyyy-MM-dd hh:mm:ss'), //结束时间
        "houseId": this.houseId //房屋id
      }
      getPriceList(data).then(res => {
        this.priceList = res.data;
        this.showCalendar = true;
      })
    },
    change() {

    },
    handleShowFacility() {
      this.showFacility = true;
    },
    toAddOrder() {
      if (this.subDay < this.houseInfo.leaseIntervalDay) {
        uni.showToast({
          title: `房间预定不能小于${this.houseInfo.leaseIntervalDay}晚`,
          icon: 'none'
        })
        return
      }
      this.$tab.navigateTo(
          `/pages/main/order/addOrder?houseId=${this.houseId}&startTime=${this.form.startTime}&endTime=${this.form.endTime}`
      )
    },
    // 复制文本到剪贴板
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: function () {
          console.log('复制成功');
          // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 2000
          });
        },
        fail: function () {
          console.log('复制失败');
          // 可以添加错误处理或用户友好的提示
        }
      });
    },
    // 预约看房
    toAppointment() {
      uni.navigateTo({
        url: `/pages/manager/workOrder/attendant/add?house=${JSON.stringify(this.houseInfo.house)}`
      })
    },
    // 收藏/取消收藏房源
    handleCollect: debounce(function (data) {
      let params = {
        houseId: this.houseId,
      }
      if (data === '0') {
        deleteCollection(params.houseId).then(res => {
          console.log(res)
          this.isCollect = false;
          this.houseInfo.collectState = '1'
          this.$modal.msg('取消收藏成功')
        })
      } else {
        this.houseInfo.collectState = '0'
        addCollection(params).then(res => {
          console.log(res)
          this.$modal.msg('收藏成功')
        })
      }

    }, 1000, true),
    // 显示优惠券
    handleShowCoupon() {
      let params = {
        houseId: this.houseId,
      }
      getCouponByHouseId(params).then(res => {
        this.couponList = res.data;
        this.showCoupon = true;
      })

    },
    // 显示使用说明
    handleShowCouponInstruction(item) {
      this.couponInstructionDialogData = item;
      this.$refs.couponInstructionDialog.confirm({
        title: '使用说明',
        showCancel: false,
        confirmText: '知道了'
      })
    },
    // 领取优惠券
    handleReceiveCoupon: debounce(function (item) {
      let params = {
        couponId: item.couponId,
        pickupMethod: "2" //领取方式(1.领券中心,2.商品详情,3.核销码,4.指派)
      }
      this.$modal.loading('领取中...')
      addCouponRecord(params).then(res => {
        setTimeout(() => {
          this.$modal.closeLoading()
          this.$modal.msg('领取成功')
          item.receiveState = '0';
        }, 500)
      }).catch(err => {
        this.$modal.closeLoading()
        console.log('err', err)
        this.$modal.msg(err.msg || '领取失败')
      })
    }, 1000, true),
    //展示分享弹窗
    handleShowShare() {
      console.log('handleShare')
      this.showShare = true;
    },
    closeShare() {
      this.showShare = false
      // console.log('close');
    },
    // 生成海报
    handleGeneratePoster() {
      this.$refs.housePoster.showCanvas()
      this.showShare = false;
    },
    // 月份改变回调
    monthChange(e) {
      console.log('monthChange', e.date)
      this.$modal.loading()

      let startTime = formatCnDate(e.date[0].date, 'yyyy-MM-dd hh:mm:ss');
      let endTime = formatCnDate(e.date[e.date.length - 1].date, 'yyyy-MM-dd hh:mm:ss');
      let data = {
        "startTime": startTime, //开始时间
        "endTime": endTime, //结束时间
        "houseId": this.houseId //房屋id
      }
      getPriceList(data).then(res => {

        res.data.forEach((item, index) => {
          if (item.reserveState == 0) {
            e.date[index].bottomInfo = '￥' + item.calendarPrice
          } else if (item.reserveState == 1) {
            e.date[index].bottomInfo = '无房'
          }
          this.$nextTick(() => {
            this.$modal.closeLoading()
          })
        })
      })
    },
  }
}
</script>
<style lang="scss" scoped>

.page {
}

.scroll-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}


.content {
  background: linear-gradient(178deg, #FFFFFF 0%, #F5F5F5 100%);
  margin-bottom: 30rpx;
  padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
  padding-bottom: env(safe-area-inset-bottom);

  .tag-box {
    display: grid;
    grid-template-columns: repeat(3, auto 1fr);
    grid-gap: 10rpx;
    margin-top: 10rpx;
  }

  .h-tag {
    //width: 98rpx;
    //height: 40rpx;
    padding: 6rpx;
    background: #F4F4F4;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-weight: 400;
    font-size: 20rpx;
    color: #757575;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    &.h-tag-active {
      background: #FCEEE0;
      color: #A66237;
    }
  }

  .price-night {
    font-weight: bold;
    font-size: 24rpx;
    color: #FF3E27;
    margin-top: 14rpx;

    .number {
      font-weight: bold;
      font-size: 46rpx;
      color: #FF3E27;
      line-height: 44rpx;

    }
  }

  .area {
    border-bottom: 1px solid #666;
    padding: 20rpx 0;
  }

  .time {
    border-bottom: 1px solid #666;
    padding: 20rpx 0;
  }

  .map-box {
    width: 690rpx;
    height: 162rpx;
    background-image: url('https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/map-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 26rpx;
    padding: 0 20rpx;

    .businessCircle {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      line-clamp: 2;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;


    }

    .description {
      font-weight: 500;
      font-size: 24rpx;
      color: #808080;
      margin-top: 6rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      word-break: break-all;
    }

    .location-icon {
      width: 39rpx;
      height: 44rpx;
    }

    .map-tip {
      font-weight: bold;
      font-size: 20rpx;
      margin-top: 6rpx;
      color: #000000;
      text-align: center;


    }
  }
}

.item-box {
  margin-bottom: 160rpx;

  image {
    width: 690rpx;
    height: 300rpx;
  }

  .house-content {
    padding: 0 30rpx;

    .coupon {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;

      .coupon-label {
        display: flex;
        align-items: center;

        .coupon-label-item {
          border: 1rpx solid #FF3A31;
          border-radius: 10rpx;
          padding: 0 10rpx;
          color: #FF3A31;
          margin-right: 10rpx;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }

  .house-info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .describe {
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    font-weight: 800;
    font-size: 32rpx;
    color: #111111;


    margin-top: 12rpx;
  }

  .tip-title {
    font-weight: 500;
    font-size: 24rpx;
    color: #757575;


  }

}

.bottom-box {
  width: 750rpx;
  height: 114rpx;
  position: fixed;
  padding-top: 20rpx;
  bottom: 0;
  left: 0;
  box-sizing: content-box;
  background: #FFFFFF;
  box-shadow: 0rpx -1rpx 1rpx 2rpx rgba(135, 135, 135, 0.16);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  background-color: #fff;
  padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
  padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2

  .reserve {
    width: 200rpx;
    height: 88rpx;
    background: #FF7947;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
    text-align: center;
    margin-right: 10rpx;

    .subday {

      font-weight: 500;
      font-size: 18rpx;
      color: #FFFFFF;
      text-align: center;


    }
  }

  .appointment {
    width: 160rpx;
    height: 88rpx;
    background: #02A7F0;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
    text-align: center;
    margin-right: 30rpx;
  }

  .vertical {
    width: 0rpx;
    height: 79rpx;
    border: 2rpx solid #E5E5E5;
    margin-left: 30rpx;
    margin-right: 22rpx;
  }

  .time-box {
    font-weight: 500;
    font-size: 24rpx;
    color: #757575;


  }

  .time-text {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;


    margin-left: 6rpx;
  }

  .landlord-img {
    width: 68rpx;
    height: 68rpx;
    background: #789AC5;
    border-radius: 30rpx;
  }

  .landlord-text {
    font-weight: 500;
    font-size: 18rpx;
    color: #757575;
    text-align: center;


    margin-top: 4rpx;
  }
}

.main-title {
  font-weight: 800;
  font-size: 36rpx;
  color: #000000;


}

.gray-title {
  font-weight: 500;
  font-size: 24rpx;
  color: #757575;


}

.house-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-weight: bold;
  font-size: 28rpx;
  color: #111111;


  .item-icon {
    width: 51rpx;
    height: 51rpx;
    margin-right: 6rpx;
  }
}

.all-facility {
  font-weight: 500;
  font-size: 22rpx;
  color: #111111;


}

.rule-box {
  width: 580rpx;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  border: 2rpx solid rgba(112, 112, 112, 0.1);
  margin-left: 68rpx;
  margin-top: 30rpx;

  > view:last-child {
    border-bottom: none;
  }

  .rule-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #FAFBFC;
    border-bottom: 2rpx solid rgba(112, 112, 112, 0.1);
    font-weight: 500;
    font-size: 24rpx;
    color: #000000;


    > view {
      padding: 20rpx 28rpx;
      border-right: 2rpx solid rgba(112, 112, 112, 0.1);

    }

    > view:last-child {
      border-right: none;
    }
  }

  .rule-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2rpx solid rgba(112, 112, 112, 0.1);
    font-weight: 500;
    font-size: 24rpx;
    color: #000000;


    > view {
      padding: 20rpx 28rpx;
      border-right: 2rpx solid rgba(112, 112, 112, 0.1);
    }

    > view:last-child {
      border-right: none;
    }
  }
}

.main-box {
  width: 690rpx;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding: 28rpx 18rpx;
  margin-top: 20rpx;

  .icon-img {
    width: 38rpx;
    height: 38rpx;
  }

  .free-title {
    font-weight: 800;
    font-size: 28rpx;
    color: #427E6D;

    margin-top: 28rpx;
  }

  .mini-title {
    font-weight: 800;
    font-size: 28rpx;
    color: #000000;


    margin-top: 28rpx;
    margin-bottom: 8rpx;
  }
}

.require-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: 40rpx;

  .require-item {
    font-weight: 500;
    font-size: 22rpx;
    color: #4E4E4E;


    margin-bottom: 18rpx;

    .require-img {
      width: 28rpx;
      height: 28rpx;
      margin-right: 2rpx;
    }
  }
}

.gray-text {
  color: #757575 !important;
  font-weight: normal;
  font-size: 22rpx;
}

.facility-box {
  width: 580rpx;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-between;
  margin-left: 32rpx;
}

.facility-title {
  font-weight: 800;
  font-size: 22rpx;
  color: #111111;


}

.facility {
  font-weight: 500;
  font-size: 22rpx;
  color: #4E4E4E;


  margin-bottom: 18rpx;

  .f-icon {
    width: 15rpx;
    height: 10rpx;
    margin-right: 10rpx;
  }
}

.pop-box {
  position: relative;
  overflow: hidden;
  height: 680rpx;
}

.pop-title {
  position: absolute;
  font-weight: 800;
  font-size: 34rpx;
  color: #000000;
  text-align: center;
  background: #fff;
  z-index: 2000;
  top: 30rpx;
  left: 50%;
  transform: translateX(-50%);
}

.pop-content {
  margin-top: 100rpx;
  height: 600rpx;
  overflow: auto;
  background: #F2F2F2;
}

.pop-footer {
  padding: 20rpx;

  .pop-footer__button {
    height: 73rpx;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    font-size: 30rpx;
    color: #fff;
    background-color: #FF7950;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.coupon__list {
  padding: 30rpx;

  .coupon__list__item {
    background-color: #fff;
    border-radius: 10rpx;
    margin-bottom: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .coupon__list__item__content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;

      .coupon__list__item__content__left {
        width: 25%;
        text-align: center;

        &.active {
          color: $hxk-primary-color;
        }

        .coupon__list__item__content__left__price {
          font-size: 20rpx;
          margin-bottom: 10rpx;

          text {
            font-size: 32rpx;
            font-weight: bold;
          }
        }

        .coupon__list__item__content__left__condition {
          font-size: 20rpx;
        }
      }

      .coupon__list__item__content__center {
        padding: 0 10rpx;
        border-left: 1rpx dashed #D7D7D7;
        width: 60%;

        .coupon__list__item__content__center__name {
          font-size: 28rpx;
          margin-bottom: 20rpx;
          font-weight: bold;
        }

        .coupon__list__item__content__center__validTime {
          font-size: 24rpx;
          margin-bottom: 20rpx;
        }

        .coupon__list__item__content__center__desc {
          font-size: 24rpx;
          line-height: 32rpx;
          text-align: justify;
          display: flex;

          .coupon__list__item__content__center__desc__label {
            white-space: nowrap;
          }

          .coupon__list__item__content__center__desc__text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }

          .coupon__list__item__content__center__desc__detail {
            color: #02BAF6;
            white-space: nowrap;
          }

        }
      }

      .coupon__list__item__content__right {
        width: 15%;
        text-align: center;

        .coupon__list__item__content__right__button {
          display: block;
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          border-radius: 10rpx;
          background-color: $hxk-primary-color;;
          border: 1rpx solid $hxk-primary-color;
          color: #FFFFFF;
          font-size: 22rpx;

          &.active {
            border: 1rpx solid $hxk-primary-color;
            color: $hxk-primary-color;
            background-color: #fff;
          }
        }
      }
    }

  }
}

.share-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;

  .share-item-box {
    button {
      height: auto;
      padding-right: 0;
      padding-left: 0;
      margin-right: 0;
      margin-left: 0;
      font-size: 28rpx;
      line-height: 1;
      color: #1c1c1c;
      background: none;
      border: none;

      &:after {
        border: none;
      }
    }

    .item-icon {
      width: 100rpx;
      height: 100rpx;
      padding: 10rpx;
    }
  }
}

.handle-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>